<script setup lang="ts" name="index">
import {
  onMounted,
  reactive,
  defineAsyncComponent,
  ref,
  nextTick,
  computed,
  watch,
} from "vue";
import { useI18n } from "vue-i18n";
const { locale } = useI18n();
import store from "./store";
let loginhome = defineAsyncComponent(
  () => import("@/components/loginhome.vue")
);

//设置语言
if (localStorage.getItem("lang") == null) {
  localStorage.setItem(
    "lang",
    JSON.stringify({
      img: "guoqi_03.png",
      name: "Portugues do Brasil",
      lang: "pt",
    })
  );
} else {
  let lang = JSON.parse(localStorage.getItem("lang"))
  locale.value = lang.lang;
}
store.commit("SET_LANG", JSON.parse(localStorage.getItem("lang")));

let esSvga = defineAsyncComponent(() => import("@/components/svgamodel.vue"));
let initdialog = defineAsyncComponent(() => import("@/components/initdialog.vue"));
import { useRouter } from "vue-router";
// 监听当前路由
const router = useRouter();
let current = ref(null);
watch(
  () => router.currentRoute.value,
  (newValue: any) => {
    current.value = newValue.fullPath;
  },
  { immediate: true }
);

let isLoading = computed(() => store.getters.isLoading);
let floating = ref(true);
let openinit = ref(false);
const images = reactive([
  "https://cdn-app-pc.goodlukn.com/file/5aca2bf2b0d2af3c143c25d08841b817_20230724230316.svga",
  "https://cdn-app-pc.goodlukn.com/file/1c4cf18741b04954ee671a9fecd55f3b_20230724223418.svga",
  "https://cdn-app-pc.goodlukn.com/file/7f7a93ca8662191bb8506efb8da33f8a_20230724223222.svga",
]);
let offset = reactive({ y: window.innerHeight - 120 });
let offset1 = reactive({ y: window.innerHeight - 240 });
onMounted(() => {
  openinit.value = true;
  let time = setInterval(() => {
    nextTick(() => { });
    clearInterval(time);
  }, 6000);
});
</script>

<template>
  <div v-if="isLoading" class="loading-page">
    <img src="@/assets/img/logo.gif" alt="" />
  </div>
  <router-view v-slot="{ Component }">
    <keep-alive :exclude="['withdrawal', 'rechange', 'order', 'playGame']">
      <component :is="Component" />
    </keep-alive>
  </router-view>
  <template v-if="openinit">
    <!-- <initdialog /> -->
    <van-floating-bubble class="floating-bubble1" v-if="floating" v-model:offset="offset" axis="xy" gap="10"
      magnetic="x">
      <template #default>
        <img @click="floating = !floating" style="width: 30px" src="@/assets/img/float.png" alt="" />
      </template>
    </van-floating-bubble>
    <van-floating-bubble class="floating-bubble2" v-model:offset="offset1" axis="xy" v-else gap="10" magnetic="x">
      <template #default>
        <div class="floating">
          <van-swipe style="height: 120px; width: 120px" :autoplay="3000" lazy-render>
            <van-swipe-item v-for="(image, index) in images" :key="image">
              <esSvga :svgaImg="image" :id="'canvas' + index"></esSvga>
            </van-swipe-item>
          </van-swipe>
          <span @click="floating = !floating">
            <!-- <van-icon size="4" name="cross" /> -->
            <i>×</i>
          </span>
        </div>
      </template>
    </van-floating-bubble>
  </template>
  <loginhome></loginhome>
  <!-- <img src="https://cdn-app-pc.goodlukn.com/file/c2be5446abe6c08e813f38c2230f0915_20230724223428.svga" alt=""> -->
</template>
<style>
.floating-bubble2 {
  background-color: transparent !important;
  width: 120px !important;
  height: 120px !important;
  display: flex;
  justify-content: flex-end;
  overflow: visible;
}

.floating-bubble1 {
  background-color: transparent !important;
  width: 30px !important;
  height: 30px !important;
  display: flex;
  justify-content: flex-end;
  overflow: auto !important;
  border-radius: 0 !important;
}
</style>
<style scoped lang="scss">
.floating {
  width: 120px;
  height: 120px;
  background-color: transparent !important;
  position: relative;

  .swiper {
    width: 100%;
  }

  span {
    display: block;
    width: 30px;
    height: 30px;
    @include flex(row, center, center);
    position: absolute;
    left: 0;
    top: 0;

    i {
      width: 16px;
      height: 16px;
      border-radius: 9px;
      border: 1px solid #fff;
      font-size: 12px;
      line-height: 12px;
      text-align: center;
      color: #fff;
      background-color: #1a1a1a;
      display: block;

      font-style: normal;
    }
  }

  :deep(.van-swipe__indicators) {
    display: none;
  }
}

.loading-page {
  background-color: rgb(15, 16, 18);
  position: absolute;
  z-index: 999999999999999999999999;
  width: 100vw;
  top: 0;
  left: 0;
  height: 100vh;
  margin: 0;
  padding: 0;

  img {
    width: 200px;
    position: absolute;
    top: 40%;
    left: 50%;
    margin-left: -100px;
  }
}
</style>
